<!DOCTYPE html>
<html lang="en">
{{include 'admin/public/header.html'}}

<body>
  {{include 'admin/public/nav_top.html'}}

  <div class="main-container" id="main-container">
    <script type="text/javascript">
      try {
        ace.settings.check('main-container', 'fixed')
      } catch (e) {}
    </script>

    <div class="main-container-inner">
      <a class="menu-toggler" id="menu-toggler" href="#">
        <span class="menu-text"></span>
      </a>

      {{include 'admin/public/nav_left'}}

      <div class="main-content">
        <div class="breadcrumbs" id="breadcrumbs">
          <script type="text/javascript">
            try {
              ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {}
          </script>

          <ul class="breadcrumb">
            <li>
              <i class="iconfont">&#xe616;</i>
              <a href="#">首页</a>
            </li>
            <li class="active">控制台</li>
          </ul><!-- .breadcrumb -->

          <div class="nav-search" id="nav-search">
            <form class="form-search">
              <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                  autocomplete="off" />
                <i class="icon-search nav-search-icon"></i>
              </span>
            </form>
          </div><!-- #nav-search -->
        </div>

        <div class="page-content">

          <div class="page-header">
            <h1>
              添加文章分类
            </h1>
          </div>

          <form class="form-horizontal" role="form" action="{{__HOST__}}/admin/articalcate/doAddArticalcate" method="POST">
            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="title">标题名称:</label>
              <div class="col-sm-6">
                <input type="text" name="title" id="title" style="width: 100%;" class="col-xs-10 col-sm-5">
              </div>   
              <div class="col-sm-4 title-error error-hiden" style="margin-top: 4px;color: red;"><span class="iconfont" style="margin-right: 2px; font-size: 12px;">&#xe676;  题目不能为空</span></div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="pid">上级分类:</label>

              <div class="col-sm-6">
                <select name="pid" id="pid" class="col-xs-10 col-sm-5" style="width: 100%;">
                  <option value="0">顶级分类</option>
                  {{each firstCateList}}
                  <option value="{{@$value._id}}">{{$value.title}}</option>
                  {{/each}}
                </select>
              </div>
            </div>
            
            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="keywords">关键字:</label>
              <div class="col-sm-6">
                <input type="text" name="keywords" id="keywords" style="width: 100%;" class="col-xs-10 col-sm-5">
              </div>
              <div class="col-sm-4 keywords-error error-hiden" style="margin-top: 4px;color: red;"><span class="iconfont" style="margin-right: 2px; font-size: 12px;">&#xe676;  分类关键字不能为空</span></div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="description">描述:</label>
              <div class="col-sm-6">
                <input type="text" name="description" id="description" style="width: 100%;" class="col-xs-10 col-sm-5">
              </div>
              <div class="col-sm-4 description-error error-hiden" style="margin-top: 4px;color: red;"><span class="iconfont" style="margin-right: 2px; font-size: 12px;">&#xe676;  分类描述不能为空</span></div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="description">审核状态:</label>

              <div class="col-sm-10" style="margin-top: 4px;">
                <label for="status1">已审核</label>&nbsp;&nbsp;&nbsp;<input type="radio" id="status1" name="status" value="1" checked/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label for="status2">未审核</label>&nbsp;&nbsp;&nbsp;<input type="radio" id="status2" name="status" value="0"/>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success">添加</button>
              </div>
            </div>



          </form>

        </div>
      </div><!-- /.main-content -->

    </div><!-- /.main-container-inner -->

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
      <i class="icon-double-angle-up icon-only bigger-110"></i>
    </a>
  </div><!-- /.main-container -->


  <!--[if !IE]> -->

  <script type="text/javascript">
    window.jQuery || document.write("<script src='{{__HOST__}}/admin/js/jquery-2.0.3.min.js'>" + "<" + "script>");
  </script>

  <!-- <![endif]-->

  <!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='{{__HOST__}}/admin/js/jquery-1.10.2.min.js'>"+"<"+"script>");
</script>
<![endif]-->

  <script type="text/javascript">
    if ("ontouchend" in document) document.write("<script src='{{__HOST__}}/admin/js/jquery.mobile.custom.min.js'>" +
      "<" + "script>");
  </script>
  <script src="{{__HOST__}}/admin/js/bootstrap.min.js"></script>



  <script src="{{__HOST__}}/admin/js/typeahead-bs2.min.js"></script>


  <script src="{{__HOST__}}/admin/js/bootstrap-wysiwyg.min.js"></script>

  <!-- ace scripts -->

  <script src="{{__HOST__}}/admin/js/ace-elements.min.js"></script>
  <script src="{{__HOST__}}/admin/js/ace.min.js"></script>




  <script type="text/javascript">
    $(function () {
      // 表单验证
      // 非空校验方法
      function inputIsEmpty($input, className){
        $input.blur(function(){
          let inputValue = $input.val()
          console.log(inputValue)
          if(inputValue.length == 0){
            $(className).removeClass("error-hiden")
          }else{
            $(className).addClass("error-hiden")
          }
        })
      }
      inputIsEmpty($("#title"), ".title-error")
      inputIsEmpty($("#keywords"), ".keywords-error")
      inputIsEmpty($("#description"), ".description-error")

      /* 
      function showErrorAlert(reason, detail) {
        var msg = '';
        if (reason === 'unsupported-file-type') {
          msg = "Unsupported format " + detail;
        } else {
          console.log("error uploading file", reason, detail);
        }
        $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
          '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
      }

      $('#editor1').ace_wysiwyg({
        toolbar: [
          'font',
          null,
          'fontSize',
          null,
          {
            name: 'bold',
            className: 'btn-info'
          },
          {
            name: 'italic',
            className: 'btn-info'
          },
          {
            name: 'strikethrough',
            className: 'btn-info'
          },
          {
            name: 'underline',
            className: 'btn-info'
          },
          null,
          {
            name: 'insertunorderedlist',
            className: 'btn-success'
          },
          {
            name: 'insertorderedlist',
            className: 'btn-success'
          },
          {
            name: 'outdent',
            className: 'btn-purple'
          },
          {
            name: 'indent',
            className: 'btn-purple'
          },
          null,
          {
            name: 'justifyleft',
            className: 'btn-primary'
          },
          {
            name: 'justifycenter',
            className: 'btn-primary'
          },
          {
            name: 'justifyright',
            className: 'btn-primary'
          },
          {
            name: 'justifyfull',
            className: 'btn-inverse'
          },
          null,
          {
            name: 'createLink',
            className: 'btn-pink'
          },
          {
            name: 'unlink',
            className: 'btn-pink'
          },
          null,
          {
            name: 'insertImage',
            className: 'btn-success'
          },
          null,
          'foreColor',
          null,
          {
            name: 'undo',
            className: 'btn-grey'
          },
          {
            name: 'redo',
            className: 'btn-grey'
          }
        ],
        'wysiwyg': {
          fileUploadError: showErrorAlert
        }
      }).prev().addClass('wysiwyg-style2');
    */
    })
  </script>

</body>

</html>